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Copyright 

Plain English Campaign owns the copyright to this guide. You can save 
one copy of the guide to disk, and print one copy out for your personal 
use. You must not make more than one copy without our permission. 


Introduction 


This guide assumes you have some knowledge of how web pages work. 
However, it does not go into detail about HTML (the coding used to write 
web pages). It aims to provide guidelines rather than instructions. 


The golden rule of good websites is to decide what you want your site to 
do, and then use technology to achieve your goal. 


A website is a means of communication, not a way of showing off your 
technical ability. 


When someone visits your site, it should immediately be clear: 
e who your site belongs to; 
e what purpose your site serves; and 
e how to contact you. 


If, for your contact details, you are tempted to put only an email address 
and no phone number or postal address, remember that: 
e you may be asked for these details regularly through emails, so you 
will waste your time replying; and 
e giving a phone number and address will not only reassure visitors 
that you are a genuine organisation, it will also make you appear 
more approachable. 


The way you organise your site will depend on your content. If your 
content can be divided into logical groups, divide your site into different 
sections. For example, a high-street shop could have: 

e news (press releases, archives, updates); 

e online shopping; 

e store information (local branches, opening hours); and 

e other information (financial reports, contact details, legal 

information). 


No matter how you organise your site, try to make sure that: 
e the structure of your site is as logical as possible; and 
e there is a guide to the site, or a ‘site map’, for people who can’t find 
what they are looking for. 


Remember that people may not always enter your site at the home page 
(the ‘front’ page that people get when they type your website address). 
For example, they may follow a link from one website to a specific page 
on your site, or they may have found a specific page through a search 
engine. 


This means it is a good idea for every page on your site to have a clear 
link to: 
e your home page; 
e basic information about your organisation or subject (often called 
‘About us’); 
a guide to pages on the site (a ‘site map’); and 
e contact information for you or your organisation. 


A good guideline that many web designers follow is that you should be 
able to get from any page on your site to any other page on the site with 
no more than three clicks on your mouse. 


One site that shows it is possible to present a huge amount of information 
in a way that is easy to navigate is the BBC News site. 


If you are creating a site from scratch, you should probably plan it on 
paper first. It can be a lot harder to rearrange your pages once your site 
is up and running. 


Page design 


Remember that most web designers and graphic designers work on 
screens that are larger than those used by most other people. 


If you decide to set the width of your pages, try to avoid making it more 
than 960 pixels wide. 


Anything larger than this will mean that your readers may have to scroll 
from left to right and back again as they read down the page. 


However, good practice nowadays is to have a ‘responsive’ web site 
design, as more and more people are accessing the web on devices such 
as smartphones and tablets. A responsive website is one that displays its 
content in a format that is appropriate to the size of screen available. 


Try to imagine whether people visiting your site are likely to print off 
pages (if in doubt, assume that they will). Your users will not appreciate 
printing empty pages when they’re trying to print key information, or 
printing items which are useless on the printed page, such as menu links. 


If you plan to use a style sheet to decide how your site looks, the best 
way you can do this is with a customised print CSS (Cascading Style 
Sheet). This excludes items which are pointless when printed, such as 
menus and logos. 


Browsers 


A browser is the program that people use to view your web pages. Most 
people will be using either Internet Explorer (which comes with Windows) 
or another popular browser such as Firefox or Google Chrome. In the early 
days on the internet, some of these displayed pages very differently. 
Nowadays however, most browsers conform to a common set of 
standards, and are (largely) what is known as standards-compliant. 


Even so, it is still a good idea to try your web pages on as many different 
browsers as possible. If there is a feature on your website that doesn’t 
work on a particular browser, or on older editions, you will have to decide 
whether you still want to keep it, and how many people will lose out if 
they can’t use it. 


If you already have a website up and running, you should be getting 
‘access log’ reports from your internet company. These can show what 
proportion of your visitors use a particular browser. 


Frames 


Frames are now largely an historical aspect of website design. In the past, 
many sites used a frame on the left of the screen as a menu, and put the 
various pages in a bigger frame on the right of the screen. 


Frames have now largely been replaced by style sheets to control 
presentation and layout. We strongly advise you to avoid frames. 


Colours 


Although you can use colour to make pages more attractive, don’t overdo 
it. 


You can often achieve a very effective design with just black, white and 
one or two other colours. If you use a consistent colour scheme 
throughout the site, it can give it a more professional look. 


If your design software allows it, stick to what are called ‘web safe’ 
colours. These colours are virtually guaranteed to look the same on all 
computers. This can avoid any confusion, for example when your 
corporate logo suddenly appears in a different colour on an Apple 
computer. 


Make sure your foreground/background colour combinations contrast 
enough so that your users can easily read your text. A trend in recent 
years has been to use low contrast colour combinations, in particular 


mid-grey text over a light-grey background. These often look visually 
attractive, which is why some website designers seem to like them. 
However, if no-one can read your content, your web page is just 
wallpaper. You can now use a number of online tools that will check that 
your website’s contrast meets common standards. 


Also, be careful if you use blue text. Many people will see this as a link to 
another page, so it may cause confusion. 


Text 


For sections of text, it is best to stick to a familiar, common font. There is 
no right or wrong choice, but you need to bear a few things in mind. 


e What works well on paper will not always work well on screen. This 
is because on paper you are looking at ink, while on screen you are 
looking at shining light. 


e It can be difficult to control the exact size your text appears at on 
every screen. However, as a general guideline, a line of text 
(whether in a column or across the whole screen) should not run to 
more than 70 characters. 


e Itis usually best to use what is called a ‘font family’ in your style 
sheet to define what font will be used on your site. This lets you 
choose a main font, but also lets you set a list of alternatives in 
case a person visiting your site does not have your main font 
available on their screen. 


e Try to avoid using underlining for emphasis. This will confuse many 
of your visitors, who will see this as a link. 


e When you use pieces of text as a link, try to avoid using the words 
‘click here’. This is because people with poor eyesight often use a 
screen reader, which converts the text on a website to speech. 
When somebody uses a screen reader to choose one of the links on 
your page, they will only hear the words used for the link. Just 
hearing ‘click here’ will not tell them what the link is for. Instead, 
use text for your link that says what the destination of the link is. 


Pictures 


You should use thumbnails if you use pictures for decoration rather than 
information. Thumbnails are small copies of a picture that a person can 

click on to then see a full-sized copy. Thumbnails will save your readers 
from having to download unwanted images. 


Always remember to use the alt attribute to include alternative text with 
the picture. This is a piece of text that appears in place of the picture if a 
person has their computer set to not show pictures. 


It also allows people who are using screen readers to know what the 
picture shows. 


It is worth noting that alt text is considered one of the most important 
accessibility features of the internet, whilst at the same time being one of 
the most poorly implemented. 


Try to understand what your users will think when they see a picture (and 
remember this can be different for the same picture used in different 
contexts) and use alt text that provides the same information. You should 
never use the filename of the picture, especially when that filename is 
something like pict4567.jpg. 


If your design package allows it, make sure you set the height and width 
of the image (in pixels). This means that when the page loads, the 
computer will leave a space for the image and load the text first. People 
can then start reading the page without having to wait for the image to 
load. 


Animations and sound 


Don’t use pointless animation - only use it for a practical reason. You may 
feel it’s necessary to use animation, but that will depend on the content of 
your site. Animation on a graphic design studio site will probably be far 
more suitable than animation on a financial-news site. 


Remember that most web designers have better computers and faster 
connections to the internet than many people visiting your site. What 
takes a couple of seconds to load on your computer will take longer for 
many people. In general, your website should avoid using Flash, a once 
popular technology that is now not supported on mobiles. If you want to 
include videos you should use HTML 5. 


Don’t use too much animation unless you know your users have up-to- 
date computers and browsers. And, if you use an animated ‘splash page’ 
(we advise against), always give your users the option to avoid the 
animation and go straight to the rest of your site. 


The final rule — hiring professional and 
freelance designers 
If you hire outside help for your site, remember to follow one golden rule. 


The designer is there to produce what you need, not use your site to show 
off! 


